<template>
  <div>
    <div
      class="box"
      v-for="item in artiList"
      :key="item.id"
      @click="open_video(item.id)"
    >
      <div class="head_container">
        <!-- <img :src="item.more.thumbnail" alt="" class="head_ara" mode='top'> -->
        <!-- <p class="head_ara">img</p> -->
        <p class="head_title">
          <!-- <h4>sdfasdf</h4> -->
          <span class="font16">{{ item.post_title }}</span>
          <span class="font12"
            >时间 {{ item.published_time }} 赞 {{ item.post_like }}
          </span>
        </p>
      </div>
      <img :src="item.more.thumbnail" alt="" class="vedio-p" />
      <img src="/static/images/videos.5a8e6dc1.png" alt="" class="play-icon" />
    </div>
    <i-toast id="toast" />
  </div>
</template>

<script>
const { $Toast } = require("../../../static/iview/base/index");

export default {
  data() {
    return {
      // server_url: "http://cmf5pro.cn/",
      server_url: "https://jinrigaoling.com/",
      categories: [],
      artiList: [],
      page: 1,
      total_page: 0,
    };
  },
  mounted() {
    const that = this;
    wx.request({
      url: this.server_url + "api/portal/Lists/getVideo/is_video/1",
      success: (res) => {
        that.artiList = res.data.data.list;
        that.total_page = res.data.data.total_page;
      },
    });
    wx.setNavigationBarTitle({
      title: "今日高陵-视频",
    });
  },
  methods: {
    open_video(id) {
      var url = "video_show/main?aid=" + id;
      console.log("video_url", "url:" + "/pages/article/main?aid=" + id);
      wx.navigateTo({ url });
    },
    getList1() {
      const that = this;
      console.log("getlist");
      wx.request({
        url:
          that.server_url +
          "api/portal/Lists/getVideo/is_video/1/page/" +
          that.page,
        success: (res) => {
          if (that.page > 1) {
            that.artiList = that.artiList.concat(res.data.data.list);
            console.log("当前b" + that.page);
          } else {
            that.artiList = res.data.data.list;
            console.log("当前a" + that.page);
          }
        },
      });
    },
  },
  onReachBottom() {
    if (this.page > this.total_page) {
      console.log("数据加载完了");
      $Toast({
        content: "数据加载完了",
        icon: "prompt_fill",
      });
    } else {
      // 下一页
      this.page = this.page + 1;
      this.getList1();
    }
  },
};
</script>

<style  scoped>
.box {
  background: #444444;
  height: 460rpx;
  margin-bottom: 5px;
  position: relative;
}
.box .head_ara {
  height: 80rpx;
  width: 80rpx;
  border-radius: 50%;
  background: rgb(201, 15, 126);
  margin: 3px;
}
.box .head_container {
  display: flex;
  width: 100%;
  background: #ffffff;
  height: 100rpx;
  align-items: center;
}

.head_title {
  /* width: 80%; */
  /* height:40px; */
  background: #ffffff;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-left: 20rpx;
}
.font16 {
  font-size: 18px;
}
.font12 {
  font-size: 12px;
}
.vedio-p {
  width: 100%;
  height: 360rpx;
  position: relative;
}

.play-icon {
  width: 160rpx;
  height: 160rpx;
  position: absolute;
  top: 188rpx;
  left: 300rpx;
  z-index: 99999999;
  /* left: 40%; */
}
</style>